<template>
    <div class="major-box">
        <div class="left-box">
            <el-scrollbar height="85vh">
                <div class="marjor-basic">
                    <div class="basic-top">
                        <span class="title">计算机科学与技术</span>
                        <div class="btns">
                            <span @click="backIndex">返回</span>
                            <div class="icons" @click="edit(0)"><el-icon color="#1465E1" size="22">
                                    <EditPen />
                                </el-icon></div>
                        </div>
                    </div>
                    <div class="basic-info">
                        <div class="info-item">
                            <div class="year"> <span>年</span> </div>
                            <span class="text">{{ detailInfo.eduLength }}</span>
                        </div>
                        <div class="info-item">
                            <img src="@/assets/bachelor.png" alt="">
                            <span class="text">{{ detailInfo.degree }}</span>
                        </div>
                    </div>
                    <div class="basic-desc">{{ detailInfo.description }}</div>
                </div>
                <div class="cultivate-box">
                    <div class="basic-top">
                        <div class="class-title">
                            <div class="left"></div>
                            <div class="right">培养要求</div>
                        </div>
                        <div class="icons" @click="addSibling()"><el-icon color="#1465E1" size="22">
                                <EditPen />
                            </el-icon></div>
                    </div>
                    <div class="cultivate-info" v-if="requirementData.length">
                        <el-tree :data="requirementData" node-key="uuid" v-if="!isEditing">
                            <template #default="{ node, data }">
                                <div class="custom-tree-node" @mouseenter="showBtn(node)" @mouseleave="hideBtn(node)">
                                    <div v-if="!data.isEditing" class="display-mode">
                                        <div class="node-content">
                                            <span class="node-id">{{ getSiblingIndex(node) }}.</span>
                                            <span class="node-label">{{ data.node }}</span>
                                            <span v-if="data.desc" class="node-divider">|</span>
                                            <span class="node-description">{{ data.desc }}</span>
                                        </div>
                                        <div class="tree-btn-box" v-if="node.btn_show">
                                            <el-link type="primary" :underline="false"
                                                @click="addSibling(node)">添加同级</el-link>
                                            <el-link type="primary" :underline="false" v-if="node.children"
                                                @click="addChild(node)">添加子级</el-link>
                                            <el-link type="info" :underline="false" @click="editNode(node)">编辑</el-link>
                                            <el-link type="danger" :underline="false"
                                                @click="removeNode(node, 1)">删除</el-link>
                                        </div>
                                    </div>
                                    <div v-else class="edit-mode">
                                        <div v-if="data.isParent" class="parent-edit">
                                            <el-input v-model="data.node" placeholder="请输入标题" />
                                            <div class="divider"></div>
                                            <el-input v-model="data.desc" placeholder="请输入说明" />
                                        </div>
                                        <div v-else class="child-edit">
                                            <el-input v-model="data.desc" placeholder="请输入内容" />
                                        </div>
                                        <div class="edit-actions">
                                            <el-button type="success" :icon="Check" circle size="small" color="#1465E1"
                                                @click="saveEdit(node)"></el-button>
                                            <el-button type="danger" :icon="CloseBold" circle size="small"
                                                @click="cancelEdit(node)"></el-button>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </el-tree>
                    </div>
                    <div class="cultivate-info" v-else>
                        <el-link type="primary" :underline="false" @click="addSibling()">添加培养要求</el-link>
                    </div>
                </div>
                <div class="cultivate-box">
                    <div class="basic-top">
                        <div class="class-title">
                            <div class="left"></div>
                            <div class="right">能力要求</div>
                        </div>
                        <div class="icons"><el-icon color="#1465E1" @click="addSibling('', 1)" size="22">
                                <EditPen />
                            </el-icon></div>
                    </div>
                    <div class="cultivate-info" v-if="abilityData.length">
                        <el-tree :data="abilityData" node-key="uuid" v-if="!isEditing">
                            <template #default="{ node, data }">
                                <div class="custom-tree-node" @mouseenter="showBtn(node)" @mouseleave="hideBtn(node)">
                                    <div v-if="!data.isEditing" class="display-mode">
                                        <div class="node-content">
                                            <span class="node-id">{{ getSiblingIndex(node) }}.</span>
                                            <span class="node-label">{{ data.node }}</span>
                                            <span v-if="data.desc" class="node-divider">|</span>
                                            <span class="node-description">{{ getNodeByDesc(data.desc) }}</span>
                                        </div>
                                        <div class="tree-btn-box" v-if="node.btn_show">
                                            <el-link type="primary" :underline="false"
                                                @click="addSibling(node, 1)">添加同级</el-link>
                                            <el-link type="primary" :underline="false" v-if="node.children"
                                                @click="addChild(node)">添加子级</el-link>
                                            <el-link type="info" :underline="false" @click="editNode(node)">编辑</el-link>
                                            <el-link type="danger" :underline="false"
                                                @click="removeNode(node, 2)">删除</el-link>
                                        </div>
                                    </div>
                                    <div v-else class="edit-mode">
                                        <div class="parent-edit">
                                            <el-input v-model="data.node" placeholder="请输入标题" />
                                            <div class="divider"></div>
                                            <el-cascader :options="requirementData" placeholder="请选择说明" clearable
                                                :props="cascaderProps" v-model="data.desc">
                                                <template #default="{ data }">
                                                    <div class="is_parent" v-if="data.isParent">
                                                        <span>{{ data.node }}</span>
                                                        <div class="divider"></div>
                                                        <span>{{ data.desc }}</span>
                                                    </div>
                                                    <div class="is_parent" v-else>
                                                        <span>{{ data.node }}</span>
                                                    </div>
                                                </template>
                                            </el-cascader>
                                        </div>

                                        <div class="edit-actions">
                                            <el-button type="success" :icon="Check" circle size="small" color="#1465E1"
                                                @click="saveEdit(node)"></el-button>
                                            <el-button type="danger" :icon="CloseBold" circle size="small"
                                                @click="cancelEdit(node)"></el-button>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </el-tree>
                    </div>
                    <div class="cultivate-info" v-else>
                        <el-link type="primary" :underline="false" @click="addSibling('', 1)">添加能力要求</el-link>
                    </div>
                </div>
                <div class="cultivate-box">
                    <div class="basic-top">
                        <div class="class-title">
                            <div class="left"></div>
                            <div class="right">目标岗位</div>
                        </div>
                        <div class="icons" @click="edit(3)"><el-icon color="#1465E1" size="22">
                                <CirclePlusFilled />
                            </el-icon></div>
                    </div>
                    <div class="cultivate-info" v-if="targetPositions.length">
                  
                        <el-tree :data="targetPositions" node-key="uuid" v-if="!isEditing">
                            <template #default="{ node, data }">
                                <div class="custom-tree-node" @mouseenter="showBtn(node)" @mouseleave="hideBtn(node)">
                                    <div v-if="!data.isEditing" class="display-mode">
                                        <div class="node-content">
                                            <div class="info-item">
                                                <span>{{data.positions}}</span>
                                                <el-divider direction="vertical" />
                                                <span>{{data.industry}}</span>
                                            </div>
                                            <div class="info-item">
                                                <span>关联能力要求</span>
                                                <el-divider direction="vertical" />
                                                <span>{{getTargetPositionByDesc(data.requirement)}}</span>
                                            </div>
                                        </div>
                                        <div class="tree-btn-box" v-if="node.btn_show">
                                            <el-link type="primary" :underline="false"
                                                @click="edit(3)">添加同级</el-link>
                                            <el-link type="primary" :underline="false" v-if="node.children"
                                                @click="addChild(node)">添加子级</el-link>
                                            <el-link type="info" :underline="false" @click="edit(3, data.uuid)">编辑</el-link>
                                            <el-link type="danger" :underline="false"
                                                @click="removeNode(node, 3)">删除</el-link>
                                        </div>
                                    </div>
                                    <div v-else class="edit-mode">
                                        <div class="parent-edit">
                                            <el-input v-model="data.node" placeholder="请输入标题" />
                                            <div class="divider"></div>
                                            <el-cascader :options="abilityData" placeholder="请选择说明" clearable
                                                :props="cascaderProps" v-model="data.desc">
                                                <template #default="{ data }">
                                                    <div class="is_parent" v-if="data.isParent">
                                                        <span>{{ data.node }}</span>
                                                        <div class="divider"></div>
                                                        <span>{{ data.desc }}</span>
                                                    </div>
                                                    <div class="is_parent" v-else>
                                                        <span>{{ data.node }}</span>
                                                    </div>
                                                </template>
                                            </el-cascader>
                                        </div>

                                        <div class="edit-actions">
                                            <el-button type="success" :icon="Check" circle size="small" color="#1465E1"
                                                @click="saveEdit(node)"></el-button>
                                            <el-button type="danger" :icon="CloseBold" circle size="small"
                                                @click="cancelEdit(node)"></el-button>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </el-tree>
                    </div>
                </div>
            </el-scrollbar>
        </div>
        <el-divider direction="vertical" style="height: calc(85vh - 20px);margin-top: 20px;" />
        <div class="right-box">
            <el-anchor class="custom-anchor" :offset="100" :marker="false">
                <el-anchor-link href="#one" title="1.基础信息" />
                <el-anchor-link href="#two" title="2.培养要求" />
                <el-anchor-link href="#introduction" title="3.能力要求" />
                <el-anchor-link href="#introduction" title="4.目标岗位" />
            </el-anchor>
        </div>
    </div>
    <el-dialog v-model="dialogVisable" title="Tips" width="40%" top="25vh">
        <template #header>
            <div class="my-header">
                <span>{{ dialogTitle }}</span>
            </div>
        </template>
        <div class="major-dialog" v-if="dialogAttr == 0">
            <div class="add-form">
                <div class="form-item">
                    <div class="items">
                        <div class="text">学制</div>
                        <div class="reds">*</div>
                    </div>
                    <div class="inputs">
                        <el-input v-model="detailInfo.eduLength" placeholder="请输完善学制信息" />
                    </div>
                </div>
                <div class="form-item">
                    <div class="items">
                        <div class="text">学位</div>
                        <div class="reds">*</div>
                    </div>
                    <div class="inputs">
                        <el-input v-model="detailInfo.degree" placeholder="请完善学制信息" />
                    </div>
                </div>
            </div>
            <div class="add-form">
                <div class="form-item">
                    <div class="items">
                        <div class="text">专业描述</div>
                        <div class="reds">*</div>
                    </div>
                    <div class="inputs">
                        <el-input v-model="detailInfo.description" :rows="5" type="textarea" placeholder="请完善专业描述信息" />
                    </div>
                </div>
            </div>
        </div>
        <div class="major-dialog" v-if="dialogAttr == 3">
            <div class="add-form">
                <div class="form-item">
                    <div class="items">
                        <div class="text">目标岗位</div>
                        <div class="reds">*</div>
                    </div>
                    <div class="inputs">
                        <el-input v-model="targetPosition.positions" placeholder="请输入目标岗位" />
                    </div>
                </div>
                <div class="form-item">
                    <div class="items">
                        <div class="text">面向行业</div>
                        <div class="reds">*</div>
                    </div>
                    <div class="inputs">
                        <el-input v-model="targetPosition.industry" placeholder="请输入面向行业" />
                    </div>
                </div>
                <div class="form-item">
                    <div class="items">
                        <div class="text">能力要求</div>
                        <div class="reds">*</div>
                    </div>
                    <div class="inputs">
                        <el-select v-model="targetPosition.requirement" class="search-select" placeholder="请选择能力要求"
                            popper-class="no-border-popper">

                            <el-option :label="item.node" :value="item.uuid" v-for="(item, index) in abilityData"
                                v-bind:key="index"></el-option>
                        </el-select>
                    </div>
                </div>
            </div>
            <div class="add-form">
                <div class="form-item">
                    <div class="items">
                        <div class="text">岗位职责与描述</div>
                    </div>
                    <div class="inputs">
                        <el-input v-model="targetPosition.desc" :rows="5" type="textarea" placeholder="请完善岗位职责与描述" />
                    </div>
                </div>
            </div>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisable = false">取消</el-button>
                <el-button type="primary" @click="updateMajor()">完成</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref, defineEmits } from 'vue'
import { EditPen, CirclePlusFilled, Check, CloseBold } from '@element-plus/icons-vue'
import { useMajortore } from '@/stores/major.js'
import api from '@/api/index.js'
import { ElMessage } from 'element-plus'
const majorStore = useMajortore()
const detailInfo = ref({})

const emit = defineEmits(['update-show-visable'])
const treeHeight = ref(0)
const dialogVisable = ref(false)
const isEditing = ref(false)
const dialogTitle = ref('')
const dialogAttr = ref(0)

const requirementData = ref([
]);
const abilityData = ref([
]);
const targetPositions = ref([])
const targetPosition = ref({})
treeHeight.value = requirementData.value.length * 40
const edit = (attr, uuid) => {
    if (attr == 0) {
        dialogVisable.value = !dialogVisable.value;
        dialogTitle.value = '基础信息';
        dialogAttr.value = attr
    } else if (attr == 3) {
        targetPosition.value = targetPositions.value.find(item => item.uuid == uuid)
        dialogVisable.value = !dialogVisable.value;
        dialogTitle.value = '目标岗位';
        dialogAttr.value = attr
        if(!uuid){
            initParams()
        }
    }
}
const initParams = () => {
    targetPosition.value = {}
}
const getSiblingIndex = (node) => {
    if (!node.parent) {
        // 根节点，直接返回 1（或根据业务决定）
        return 1;
    }

    const siblings = node.parent.childNodes;
    const index = siblings.findIndex(n => n.id === node.id);
    return index + 1; // 从 1 开始编号
};
const getNodeByDesc = (descValue) => {
    for (const item of requirementData.value) {
        if (item.uuid === descValue) {
            return item.node;
        }
    }
    return null; // 未找到返回 null
};
const getTargetPositionByDesc = (descValue) => {
    console.log(descValue, descValue)
    for (const item of abilityData.value) {
        if (item.uuid === descValue) {
            return item.node;
        }
    }
    return null; // 未找到返回 null
};

const cascaderProps = ref({
    label: 'node',
    value: 'uuid'
})

const backIndex = () => {
    emit('update-show-visable', 0);
}
// 显示按钮
const showBtn = (node) => {
    node.btn_show = true
}
// 隐藏按钮
const hideBtn = (node) => {
    node.btn_show = false
}
const addSibling = async (node, attr = 0) => {
    const newId = attr == 0 ? Math.max(...requirementData.value.map(n => n.id)) + 1 : Math.max(...abilityData.value.map(n => n.id)) + 1;
    if (node) {
        const parent = node.parent;
        if (parent.level === 0) {
            if (attr == 0) requirementData.value.push({ id: newId, node: '新节点', isParent: true, isEditing: true });
            if (attr == 1) abilityData.value.push({ id: newId, node: '新节点', isParent: true, isEditing: true });
            if (attr == 2) targetPositions.value.push({ id: newId, node: '新节点', isParent: true, isEditing: true });
        } else {
            parent.data.children.push({ id: newId, label: '新节点', isParent: false, isEditing: true });
        }
    } else {
        if (attr == 0) requirementData.value.push({ id: newId, label: '新节点', isParent: true, isEditing: true });
        if (attr == 1) abilityData.value.push({ id: newId, node: '新节点', isParent: true, isEditing: true });
        if (attr == 2) targetPositions.value.push({ id: newId, node: '新节点', isParent: true, isEditing: true });
    }
};
const editNode = (node) => {
    node.data.isEditing = true;
};
const addChild = (node) => {
    const newId = Math.max(...requirementData.value.flatMap(n => [n.id, ...(n.children || []).map(c => c.id)])) + 1;
    if (!node.data.children) {
        node.data.children = [];
    }
    node.data.children.push({ id: newId, label: '新子节点', isParent: false, isEditing: true });
};
const removeNode = async (node, type) => {
    const res = await api.major_delInfo({ id: detailInfo.value.id, delFlag: type, uuid: node.data.uuid })
    if (res.code === -1) {
        ElMessage.error(res.data)
        return
    }
    detail()
}
const saveEdit = async (node) => {
    let data = node.data
    node.data.isEditing = false;
    let updateParams = { id: detailInfo.value.id }
    if (Array.isArray(node.data.desc)) {
        node.data.desc = node.data.desc[0]
        updateParams.abilityRequirementsDTO = { uuid: data.uuid, node: data.node, desc: data.desc }
    } else {
        updateParams.trainingConditionsDTO = { uuid: data.uuid, node: data.node, desc: data.desc }
    }
    let res = await api.major_update(updateParams)
    if (res.code === -1) {
        ElMessage.error(res.data)
        return
    }
    detail()
};
const cancelEdit = (node) => {
    node.data.isEditing = false;
};

const detail = async () => {
    const majorId = majorStore.majorId
    const res = await api.major_detail({ id: majorId })
    detailInfo.value = res.data
    requirementData.value = detailInfo.value.trainingConditionsDTOList
    abilityData.value = detailInfo.value.abilityRequirementsDTOList
    targetPositions.value = detailInfo.value.targetPositionsDTOList
}
detail()

const updateMajor = async () => {
    let res = {}
    dialogVisable.value = false
    if (dialogAttr.value === 0) {
        let { id, description, degree, eduLength } = detailInfo.value
        res = await api.major_update({ id, description, degree, eduLength })
    } else if (dialogAttr.value === 3) {
        let { id } = detailInfo.value
        res = await api.major_update({ id, targetPositionsDTO: targetPosition.value })
    }
    if (res.code === -1) {
        ElMessage.error(res.data)
    }
    detail()
}
</script>
<style scoped>
:deep(.el-input__wrapper) {
    background: #F2F3FA !important;
}

:deep(.el-input, .el-select) {
    width: 100%;
}

.major-box {
    width: 100%;
    border-radius: 8px;
    background: #fff;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    gap: 20px;
    height: calc(85vh + 20px);
}

.major-box .left-box {
    width: 100%;
}

.major-box .right-box {
    padding: 20px 40px 0 0;
    text-align: left;
}

.marjor-basic {
    width: calc(100% - 50px);
    margin: 0 30px 10px 20px;
}

.basic-top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 10px;
}

.marjor-basic .basic-top .title {
    font-size: 18px;
    font-family: 微软雅黑, Microsoft YaHei, SimSun;
    font-weight: 600;
}

.basic-top .icons {
    cursor: pointer;
}

.basic-info {
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin-left: 10px;
}

.basic-info .info-item {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.basic-info .info-item img {
    width: 25px;
    height: 25px;
}

.basic-info .info-item .year {
    width: 25px;
    height: 25px;
    background: #1465E1;
    border-radius: 25px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.basic-info .info-item .year span {
    background: #fff;
    width: 15px;
    height: 15px;
    color: #1465E1;
    border-radius: 15px;
    font-family: 微软雅黑, Microsoft YaHei, SimSun;
    font-size: 12px;
    display: block;
    line-height: 15px;
    text-align: center;
    font-weight: 600;
}

.basic-info .info-item .text {
    margin-left: 5px;
    font-family: 微软雅黑, Microsoft YaHei, SimSun;
    font-size: 14px;
}

.basic-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 微软雅黑, Microsoft YaHei, SimSun;
    font-size: 14px;
    margin: 20px 0 0 10px;
}

.cultivate-box {
    margin: 0 30px 0 20px;
}

.class-title {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.class-title .left {
    height: 20px;
    width: 5px;
    background: #0457D5;
    border-radius: 5px;
    margin-left: 10px;
}

.class-title .right {
    margin-left: 5px;
    font-family: 微软雅黑, Microsoft YaHei, SimSun;
    font-size: 18px;
    font-weight: 600;
    text-align: left;
}

.cultivate-info {
    margin-left: 10px;
    /* min-height: 200px; */
}

.jobs {
    display: flex;
    flex-direction: row;
    margin-left: 20px;
    gap: 50px;
    align-items: start;
}

.cultivate-info .info-item {
    display: flex;
    flex-direction: row;
    font-family: 微软雅黑, Microsoft YaHei, SimSun;
    font-size: 14px;
    align-items: center;
}

.my-header {
    text-align: left;
    font-family: 微软雅黑, Microsoft YaHei, SimSun;
    font-size: 16px;
}

.add-form {
    width: calc(100% - 30px);
    margin: 10px auto;
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.form-item {
    flex: 1;
}

.add-form .items {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

.add-form .items .reds {
    color: red;
}

.add-form .inputs {
    margin-top: 10px;
}

.btns {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 20px;
    align-items: center;
}

.btns span {
    display: block;
    width: 60px;
    height: 20px;
    color: #fff;
    background: #1465E1;
    text-align: center;
    line-height: 20px;
    font-family: 微软雅黑, Microsoft YaHei, SimSun;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
}

.items-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 15px;
    gap: 5px;
    margin-top: 10px;
    cursor: pointer;
    justify-content: space-between;
}

.items-box span {
    font-family: 微软雅黑, Microsoft YaHei, SimSun;
    font-size: 14px;
}

.closebtn {
    position: absolute;
    bottom: 20px;
    right: 20px;
}

.add-btns img {
    width: 20px;
    height: 20px;
}

.tree-btn-box {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

:deep(.tree-btn-box .el-link__inner) {
    font-family: 微软雅黑, Microsoft YaHei, SimSun;
    font-size: 12px;
}

:deep(.edit-box .el-input) {
    height: 30px;
    width: 100%;
}

:deep(.el-cascader) {
    height: 30px;
    width: 100%;
}

.custom-tree-node {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 8px 0;
}

.display-mode {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}

.node-content {
    display: flex;
    align-items: center;
    flex-grow: 1;
    gap: 10px;
}

.edit-mode {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.parent-edit {
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: 100%;
}

.edit-actions {
    margin-left: 10px;
}

.is_parent {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}
</style>